<template>

  <div class="app-container calendar-list-container">

    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="活动名称" v-model="listQuery.name">
      </el-input>

      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
      <!--<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">新增</el-button>-->
      <!--<el-button class="filter-item" type="primary" :loading="downloadLoading"  icon="el-icon-download" @click="handleDownload">导出</el-button>-->

    </div>

    <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row >
      <el-table-column align="center" label='排序ID' width="80">
        <template slot-scope="scope">
          {{scope.$index}}
        </template>
      </el-table-column>

      <el-table-column label="活动名称" width="140" align="center">
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>

      <el-table-column label="开始时间" width="160" align="center">
        <template slot-scope="scope">
          {{scope.row.beginTime}}
        </template>
      </el-table-column>

      <el-table-column label="结束时间" width="160" align="center">
        <template slot-scope="scope">
          {{scope.row.endTime}}
        </template>
      </el-table-column>

      <el-table-column label="活动奖品" width="255" align="center">
        <template slot-scope="scope">
          {{scope.row.info}}
        </template>
      </el-table-column>
      <el-table-column label="活动规则" width="350" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.rule}}</span>
        </template>
      </el-table-column>
      <el-table-column label="验证码" width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.code}}
        </template>
      </el-table-column>

      <el-table-column  label="操作"  align="center"  >
        <template slot-scope="scope">
          <el-button type="primary" @click="handleUpdate(scope.row)" size="mini">修改</el-button>
          <!--<el-button size="mini" type="danger" @click="removeUser(scope.row)" >删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="dataForm" :model="temp"  label-position="right" label-width="80px" style='width: 400px; margin-left:50px;'>

        <el-form-item  label="活动名称" prop="name">
          <el-select class="filter-item"  v-model="temp.name" placeholder="请选择" disabled >
            <el-option
              v-for="item in status"
              :key="item.val"
              :label="item.name"
              :value="item.name" >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item  label="开始时间" class="postInfo-container-item" prop="beginTime" >
          <el-date-picker
            v-model="temp.beginTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item  label="结束时间" class="postInfo-container-item" prop="endTime" >
          <el-date-picker
            v-model="temp.endTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="活动奖品" prop="info">
          <el-input v-model="temp.info"></el-input>
        </el-form-item>


        <el-form-item label="活动规则" prop="rule">
          <el-input type="textarea" :rows="2" v-model="temp.rule"></el-input>
        </el-form-item>

        <el-form-item label="验证码" prop="code">
          <el-input v-model="temp.code"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="dialogFormVisible = false">取消</el-button>
        <el-button :loading="buttonLoading" v-if="dialogStatus=='create'" type="primary" @click="createData">确认</el-button>
        <el-button  :loading="buttonLoading" v-else type="primary" @click="updateData">确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<style>

  .filter-container{
    padding-bottom: 20px;
  }

</style>

<script>
  import { Merge } from '../../api/activity'

  import { Dels } from '../../api/activity'

  import { List } from '../../api/activity'

  export default {
    data() {
      return {
        status: [
          { name: '每日活动', val: '每日活动' },
          { name: '每周活动', val: '每周活动' },
          { name: '月度活动', val: '月度活动' },
          { name: '年度活动', val: '年度活动' }
        ],
        list: null,
        lists: null,
        winnerList: null,
        listLoading: true,
        buttonLoading: false,
        listQuery: {
          name: null
        },
        temp: {
          activityId: '',
          name: '',
          beginTime: '',
          endTime: '',
          updateTime: '',
          lastStartTime: '',
          lastEndTime: '',
          info: '',
          rule: '',
          createTime: '',
          code: ''
        },
        dialogFormVisible: false,
        dialogStatus: '',
        downloadLoading: false,
        dialogPayVisible: false,
        textMap: {
          update: '编辑活动信息：',
          create: '新增活动信息：'
        },
        rules: {
          activityId: [{ required: true }],
          name: [{ required: true }],
          beginTime: [{ required: true }],
          endTime: [{ required: true }],
          updateTime: [{ required: true }],
          lastStartTime: [{ required: true }],
          lastEndTime: [{ required: true }],
          info: [{ required: true }],
          rule: [{ required: true }],
          createTime: [{ required: true }],
          code: [{ required: true }]
        }
      }
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          // draft: 'gray',
          0: 'danger'
        }
        return statusMap[status]
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true
        List(1, null, this.listQuery.name, 'activity_id asc').then(response => {
          this.list = response.data.list
          this.listLoading = false
        })
      },
      removeUser: function(user) {
        this.$confirm('确定要删除此抽奖活动信息吗?', '提示',
          {
            type: 'warning'
          })
          .then((res) => {
            Dels({
              activityId: user.activityId
            })
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.fetchData()
          })
          .catch(() => {
            this.$message.info('已取消操作!')
          })
      },
      handleFilter() {
        this.fetchData()
      },
      handleCreate() {
        this.resetTemp()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
      },
      handleUpdate(row) {
        this.temp = Object.assign(this.temp, row)
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
      },
      handleDownload() {

      },
      createData() {
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            this.buttonLoading = true
            Merge(this.temp).then(res => {
              this.temp = res.data
              this.list.unshift(this.temp)
              this.dialogFormVisible = false
              this.buttonLoading = false
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
              this.fetchData()
            }).catch(reason => {
              console.log(reason)
              this.buttonLoading = false
            })
          } else {
            console.log('验证失败')
          }
        })
      },
      updateData() {
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            this.buttonLoading = true
            Merge(this.temp).then(res => {
              this.updateList(res.data)
              this.dialogFormVisible = false
              this.buttonLoading = false
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            }).catch(reason => {
              console.log(reason)
              this.buttonLoading = false
            })
          }
        })
      },
      updateList(data) {
        for (const v of this.list) {
          if (data.activityId === v.activityId) {
            const index = this.list.indexOf(v)
            data = Object.assign(v, data)
            this.list.splice(index, 1, data)
            break
          }
        }
      },
      resetTemp() {
        this.temp = {
          activityId: '',
          name: '',
          beginTime: '',
          endTime: '',
          updateTime: '',
          lastStartTime: '',
          lastEndTime: '',
          info: '',
          rule: '',
          createTime: '',
          code: ''
        }
      }
    }
  }
</script>
